<template>
  <div class="editorUser-contanier">
    <div class="editorUser-header">
      <h3>临安区公共机构公务车辆基本情况</h3>(&nbsp;
      <el-select v-model="searchKey" placeholder="选择单位" size='mini' @change="onSearch">
        <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      &nbsp;)
    </div>
    <div class="editorUser-content">
      <el-table ref="singleTable" border :data="userLists" highlight-current-row style="width: 100%">
        <el-table-column type="index" width="50" :index="indexMethod">
        </el-table-column>
        <el-table-column property="Department" label="单位名称">
        </el-table-column>
        <el-table-column property="Number" label="车牌号" width="200">
        </el-table-column>
        <el-table-column property="Type" label="车型">
        </el-table-column>
        <el-table-column label="购置时间" width="120">
          <template slot-scope="scope">
            {{scope.row.BoughtAt.substring(0,11)}}
          </template>
        </el-table-column>
        <el-table-column property="Displacement" label="排量" width="90">
        </el-table-column>
        <el-table-column label="申报开始时间" width="120">
          <template slot-scope="scope">
            {{scope.row.BeginTime.substring(0,11)}}
          </template>
        </el-table-column>
        <el-table-column label="申报结束时间" width="120">
          <template slot-scope="scope">
            {{scope.row.EndTime.substring(0,11)}}
          </template>
        </el-table-column>
        <el-table-column property="Remark" label="备注" width="70">
        </el-table-column>
        <!--<el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <div class="editorUser-page" v-if="count>pageSize+1">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="pageSize" layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchKey: '',
        departmentData: ['所有一级(含下属)单位'],
        userLists: [],
        currentPage3: 1,
        count: 0,
        pageIndex: 1,
        pageSize: 15
      }
    },
    methods: {
      indexMethod(index) {
        return this.pageSize * (this.pageIndex - 1) + index + 1
      },
      onSearch() {
        this.pageIndex = 1;
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.pageIndex = val
        this.currentPage3 = val
        this.getUserList()
        console.log(`当前页: ${val}`);
      },
      // 获取车辆信息列表
      async getUserList() {
        this.userLists = []
        this.searchKey = this.searchKey == '所有一级(含下属)单位' ? '' : this.searchKey
        const result = await this.$get('/api/Car', { departmentName: this.searchKey, pageSize: this.pageSize, pageIndex: this.pageIndex })
        console.log(result, '用户列表')
        this.userLists = result.Data
        this.count = result.Count
      },
      async getDepartmentNames() {
        const result = await this.$get('/api/User/getDepartmentNames')
        var obj = JSON.parse(localStorage.getItem('userInfo'))
        if (obj.role == '2') {
          this.searchKey = result[0]
          this.departmentData = result;
        } else {
          this.departmentData = this.departmentData.concat(result)
        }
        this.getUserList()
      },
    },
    created() {
      this.showHome.isShow = false;
      this.getDepartmentNames()
    }
  }

</script>
<style lang="scss" scoped>
  .editorUser-contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .active {
    color: red;
  }

  .editorUser-header {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    h3 {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin-right: 10px;
    }
  }

  .editorUser-content {
    height: 550px;
    width: 100%;
    margin-top: 10px;
    padding: 0 15px;
  }

  .editorUser-page {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .el-input {
    width: 200px;
    height: 25px;
    line-height: 25px;
  }
</style>